<template>
  <div class="screen-left2">
    <div :class="{closed: !visible}" class="screen-left2-bg">
      <div class="screen-left2-anchor" @click="visible = !visible"></div>

      <div class="screen-left2-main">
        <div class="screen-left2-main-head">
          <img src="@/assets/screen/slash1.svg" />
          <img src="@/assets/screen/slash2.svg" />
          <div class="header-item" v-for="item in items" :key="item.value">
            {{item.label}}
          </div>
        </div>
        <div class="screen-left2-main-inner"></div>

      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'index',
  data() {
    return {
      visible: true,
      items: [
        {label: '经济运行', value: 1},
        {label: '项目管理', value: 2}
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.screen-left2 {
  position: absolute;
  top: 10%;
  bottom: 4%;
  left: 8px;
  z-index: 2;

  &-anchor {
    position: absolute;
    width: 5px;
    height: 100px;
    cursor: pointer;
    background-color: transparent;
    z-index: 2;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }

  &-bg {
    --pdRight: 15px;
    position: absolute;
    z-index: 1;
    height: 100%;
    background-image: url("~@/assets/screen/left-bg.png");
    background-size: 100% 100%;
    width: 450px;
    box-sizing: border-box;
    padding-right: var(--pdRight);
    transition: all .3s cubic-bezier(0.7,0,0.3,1);

    &.closed {
      transform: translateX(-435px);
    }
  }

  &-main {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;

    &-head {
      display: flex;
      padding-top: 50px;

      .header-item {
        font-size: 20px;
      }
    }
  }
}




</style>
